<template>
	<div>
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item>
					<i class="el-icon-lx-cascades"></i>
					钱包列表
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="container">
			<div>
				<div class="msg">
					<ul>
						<li>
							<h4>总金额</h4>
							<p>20600</p>
						</li>
						<li>
							<h4>总销售奖励</h4>
							<p>0</p>
						</li>
						<li>
							<h4>总管理津贴</h4>
							<p>8000</p>
						</li>
						<li>
							<h4>总提现金额</h4>
							<p>12600</p>
						</li>
					</ul>
				</div>
				<div class="search box">
					<div>
						姓名：
						<el-input placeholder="姓名查询" v-model="searchName" clearable></el-input>
					</div>
					<div class="btns">
						<el-button type="primary" icon="el-icon-search" @click="seach">查询</el-button>
						<el-button type="primary" icon="el-icon-refresh" @click="reset">重置</el-button>
						<el-button type="primary" @click="exportToExcel">导出Excel文件</el-button>
					</div>
				</div>

				<div class="list-nav">
					<el-menu :default-active="navIndex" class="el-menu-demo" mode="horizontal" @select="handleNavSelect">
						<el-menu-item index="1">大客户</el-menu-item>
						<el-menu-item index="2">合伙人</el-menu-item>
					</el-menu>
				</div>
				<div class="list">
					<el-table :data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border style="width: 100%;margin: 0 auto;">
						<el-table-column width="46px" type="index" label="ID" align="center"></el-table-column>
						<el-table-column prop="name" label="姓名" align="center"></el-table-column>
						<el-table-column min-width="120px" prop="phone" label="手机号" align="center"></el-table-column>
						<el-table-column label="代理级别" align="center">市</el-table-column>
						<el-table-column prop="province" label="代理区域" align="center"></el-table-column>
						<el-table-column prop="manaBounus" label="管理津贴" align="center"></el-table-column>
						<el-table-column prop="cash" label="提现金额" align="center"></el-table-column>
						<el-table-column prop="soldBounus" label="销售奖励" align="center"></el-table-column>
						<el-table-column prop="allcount" min-width="120px" label="总金额" align="center"></el-table-column>
						<el-table-column fixed="right" label="操作" min-width="200px" align="center">
							<template slot-scope="scope">
								<el-button @click="detailed(scope.row)" type="text" size="small">钱包明细</el-button>
								<el-button type="text" size="small" disabled>财务打款</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="block">
					<el-pagination
						@size-change="handleSizeChange"
						@current-change="handleCurrentChange"
						:current-page="currentPage"
						:page-sizes="[4, 8]"
						:page-size="100"
						layout="total, sizes, prev, pager, next"
						:total="tableData.length"
					></el-pagination>
				</div>
			</div>

			<div>
				<el-dialog title="收货地址" :visible.sync="dialogTableVisible">
					<el-table :data="gridData">
						<el-table-column property="date" label="日期" width="150"></el-table-column>
						<el-table-column property="name" label="姓名" width="200"></el-table-column>
						<el-table-column property="address" label="地址"></el-table-column>
					</el-table>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'dataStatistics',
	data() {
		return {
			searchOrderNum: '',
			searchName: '',
			searchCompany: '',
			orderTime: '',
			navIndex: '1',
			tableData: [],
			test: true,
			currentPage: 1,
			pageSize: 4,
			row: '',
			gridData: [],
			dialogTableVisible: false
		};
	},
	watch: {
		navIndex(val, oldVal) {
			switch (val) {
				case '1':
					this.loadData('/api/getAgentSum');
					break;
				case '2':
					this.axios.get('/api/getPartnerSum').then(res => {
						// console.log(res)
						this.tableData = res.data.msg;
					});
					break;
				default:
					break;
			}
		}
	},
	methods: {
		loadData(url) {
			this.axios.get(url).then(res => {
				// console.log(res)
				this.tableData = res.data.res;
				// console.log(this.tableData)
			});
		},
		handleNavSelect(key, keyPath) {
			this.navIndex = key;
		},
		handleSizeChange(val) {
			this.pageSize = val;
		},
		handleCurrentChange(val) {
			this.currentPage = val;
		},
		seach() {
			this.axios
				.post('/api/getKeyNameInfo', {
					name: this.searchName
				})
				.then(res => {
					this.tableData = res.data.msg;
				});
		},
		reset() {
			//重置
			this.searchName = '';
			this.loadData('/api/getAgentSum');
		},
		detailed(row) {
			//明细
			console.log(row._id);
			this.axios({
				method: 'post',
				url: '/api/geWallettInfo',
				data: {
					_id: row._id
				}
			}).then(res => {
				console.log(res);
			});
		},
		exportToExcel() {
			//excel数据导出
			require.ensure([], () => {
				const { export_json_to_excel } = require('../../../assets/js/Export2Excel.js');
				const tHeader = ['姓名', '手机号', '代理区域', '管理津贴', '提现金额', '销售奖励', '总金额'];
				const filterVal = ['name', 'phone', 'province', 'manaBounus', 'cash', 'soldBounus', 'allcount'];
				const list = this.tableData;
				const data = this.formatJson(filterVal, list);
				export_json_to_excel(tHeader, data, '用户列表');
			});
		},
		formatJson(filterVal, jsonData) {
			return jsonData.map(v => filterVal.map(j => v[j]));
		}
	},
	mounted() {
		this.loadData('/api/getAgentSum');
	}
};
</script>

<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
	display: inline-block;
}
.table {
	width: 100%;
	font-size: 14px;
}
.red {
	color: #ff0000;
}
.mr10 {
	margin-right: 10px;
}
.table-td-thumb {
	display: block;
	margin: auto;
	width: 40px;
	height: 40px;
}

/*  */
.msg ul {
	display: flex;
	margin-bottom: 30px;
}

.msg li {
	width: 100px;
	list-style: none;
	text-align: center;
}

.msg li h4 {
	padding: 10px 0;
}

.box {
	display: flex;
	margin-bottom: 20px;
}

.box > div {
	margin-right: 10px;
}

.box > div > div {
	display: inline-block;
	width: 200px;
}

.list-nav {
	margin-top: 10px;
}

.block {
	display: flex;
	justify-content: center;
}
</style>
